import React, {Component} from 'react'
import {Current} from "@tarojs/taro";
import {View, Image} from '@tarojs/components'
import {getActDetail, upActReg} from '../../service/active'
import {getStorageSync, showToast} from "../../utils/common";


import './index.scss'

type PageStateProps = {}

type PageDispatchProps = {}

type PageOwnProps = {}

type PageState = {
  detail: {},
  id: string
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Index {
  props: IProps;
}


class Index extends Component<IProps, PageState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      detail: {},
      id: ''
    }
  }


  componentWillMount() {
    const {router} = Current;
    if (router) {
      let id = router.params.id
      console.log(id);
      if (id) {
        this.setState({
          id: id
        })
      }
    }
  }

  componentDidMount() {
    this.loadData()
  }

  loadData() {
    this.getActList()
  }

  handleSubForm = async () => {
    const {id} = this.state
    console.log(id);
    const userInfo = getStorageSync('userInfo')
    if (!userInfo.id) return showToast('请先登录');
    if (!userInfo.edu_account) return showToast('请先完成学号绑定');
    const params = {
      user_id: userInfo.id,
      act_category: id,
      user_class: userInfo.edu_class,
      user_number: userInfo.edu_account
    }
    const res = await upActReg(params)
    console.log(res);
    if (res.code && res.code
      === 1) {
      showToast('报名成功')
    }
  }

  async getActList() {
    const id = this.state.id
    const res = await getActDetail({id})
    console.log(res);
    this.setState({
      detail: res.data
    })
  }

  render() {
    const detail: any = this.state.detail
    return (
      <View className='active_detail_container'>
        <View className='at-article'>
          <View className='at-article__h1'>
            {detail.title}
          </View>
          <View className='at-article__info'>
            2017-05-07&nbsp;&nbsp;&nbsp; {detail.act_author}
          </View>
          <View className='at-article__content'>
            <View className='at-article__section'>
              <View className='at-article__p'>
                {detail.content}
              </View>
              <Image
                className='at-article__img'
                src={detail.act_QCode}
                mode='widthFix'
              />
            </View>
          </View>
        </View>
        <View onClick={this.handleSubForm} className='btn_sub'>一键报名此活动</View>
      </View>
    )
  }
}

export default Index
